<template>
  <div class="container header full">
    <My-header title="首页">
     <span  @click="handleLogout()" class="right">退出</span> 
    </My-header>
    <div class="content">
      <div class="index-top">
        <p class="p2"><span>{{userInfo.name}}</span></p>
        <!-- <p class="p2"><span>采购员</span></p> -->
        <div>
          <div class="left"><p class="p6">{{ds}}</p><p class="p5">数量</p></div>
          <div class="left"><p class="p3">{{hj}}</p><p class="p5">合计(元)</p></div>
          <div class="left"><p class="p4">{{tkhj}}</p><p class="p5">退款(元)</p></div>
        </div>
      </div>
      <ul class="index-tab">
        <li @click="selectTab(1)" :class="{'active': tabIndex===1}">本周</li>
        <li @click="selectTab(2)" :class="{'active': tabIndex===2}">本月</li>
        <li @click="selectTab(3)" :class="{'active': tabIndex===3}">上月</li>
      </ul>
      <div class="chart">
        <div class="v-header">消费占比</div>
        <div>
          <div id="main" style="width: 100%;height:15rem;"></div>
        </div>
      </div>
      <div class="">
       
        <div class="v-header"> 活跃客户</div>
        <div  class="s-panel">
        <!-- <p class="mb05">代收款:<span class="red">￥{{detail.sjhj-detail.skje}}</span></p> -->
        <ul  class="box">
          <li class="skje"   >
           
            <span>昵称</span>
            <span>数量</span>
            <span>消费额</span>
          </li>
          <li class="skje" v-for="item of hykh" :key="item.cid"  @click="godetail(item.khname,item.cid)">
            <span class="mb05">{{item.khname}}</span>
            <span class="mb05">{{item.count}}</span>
            <span class="mb05">{{item.hj_xdje}}</span>
            
          </li>
        </ul>
      </div>
       
      </div>
    </div>
   
    <Tabnav name="nav" />
  </div>
</template>

<script>
import Tabnav from "@/components/Tabnav.vue";
import MyHeader from "@/components/MyHeader.vue";
import Btn from "@/components/Btn.vue";
import * as echarts from 'echarts';
import { mapState , mapActions } from "vuex";
import axios from "axios";
import {
  //getMonthDays ,
  getWeekStartDate , 
  getMonthStartDate , 
  getLastMonthStartDate , 
  getLastMonthEndDate
 
 }from '@/date.js' 

export default {
  name: "home",
  components: {
    MyHeader,
    Tabnav,
    Btn
  },
  data() {
    return {
      tabIndex: 1,
      ghuser: 0,
      spname:[],//商品名称
      spbl:[],//商品比例
      ds:0,//采购单
      hj:0,//合计
      tkhj:0,//退款合计
      starttime:getWeekStartDate(),//默认本周开始日期
      endtime:'',//结束日期
      hykh:[]
      
    };
  },
   computed: {
    ...mapState(["userInfo" ])
  },
  mounted() {
    this.getChartlist();
      
  },
  methods: {
     ...mapActions(["logout"]),
    // 转跳页面
    godetail(name,id) {
      this.$router.push({ name: "clientDetail", params: { name,id } });
    },
  
    handleLogout() {
     
      if (confirm("确认退出登录吗？")) {
        this.logout();
        this.$router.replace("/login");
      }
    },
    selectTab(i) {
      this.tabIndex = i;
       if(i=='1'){
        this.starttime = getWeekStartDate();//获得本周的开始日期 
        this.endtime = '';
        //console.log(getWeekStartDate())
      }else if(i=='2'){
        this.starttime = getMonthStartDate()//获得本月的开始日期 
        this.endtime = '';
        //console.log(getMonthStartDate())
      }else{
        this.starttime =  getLastMonthStartDate()//获得上月开始时间
        //console.log(getLastMonthStartDate())
        this.endtime = getLastMonthEndDate()//获得上月结束时间
       // console.log(getLastMonthEndDate())
      }
       this.getChartlist();
    },
    //获取数据
    getChartlist(){
      axios
        .get("cust/custda!tjCust.action", {
          params: {
            toUser: this.userInfo.toUser,
            sid: this.userInfo.id || -1,
            sdate: this.starttime,
            edate: this.endtime

          }
        })
        .then(response => {
        
          if(response.data.state==0){
          this.hykh=response.data.list,
         
          response.data.list.forEach((item ,i)=> {
           this.spname.push(item.khname)
           var value= {value: item.hj_xdje,name: item.khname};
           this.spbl.push(value)
           
          })
          this.ds=response.data.ds//采购单
          this.hj=response.data.hj//采购金额
           this.tkhj=response.data.tkhj//采购金额

          this.initChart()
          }else{
            console.log('走这里')
            // this.spbl = [];
            // this.spname = [];
            this.hykh = [];
            this.initChart()
          }
          
         
        })
        .catch(function(error) {
          window.console.log(error);
        });

    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById("main"));
     
      // 指定图表的配置项和数据
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: this.spname
        },
        series: [
          {
            name: "客户",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "16",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:this.spbl
           
          }
        ]
      };
   
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option,true);
      //解决图标叠加的问题
      this.spbl = [];
      this.spname = [];
    
       
    }
  }
};
</script>

<style lang="scss">
.s-panel {
  background: #fff;
  margin-bottom: 3rem;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
 
  .box{
    border: 0.1rem solid #eee;
    .skje{
      line-height: 2rem;
      border-bottom: 0.05rem solid #eee;
    }
    .skje span{
      display: inline-flex;
      width: 6.5rem;
      justify-content: center;
     
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .mb05{
      // margin-bottom: .5rem;
      color: #607D8B;
    }
  }  

}

.right{
    border: 0.1rem solid #eee;
    border-radius: 1rem;
    background: #25b02a;
    right: 0.3rem !important;
    top: 0.6rem !important;
    height: auto !important;
    line-height: 1.3rem !important;
    z-index: 999;
    color: #fff;
    padding: 0.2rem;
}
.index-top {
  background: #444;
  color: #fff;
  overflow: hidden;
  p {
    text-align: center;
  }
  .p1 {
    margin-top: 2rem;
     margin-bottom: 2r
  }
  .p2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
    span {
      background: #d6841c;
      // font-size: 0.8rem;
      padding: 0.2rem 0.8rem;
      border-radius: 0.5rem;
    }
  }
  .p3 {
    line-height: 2rem;
    font-size: 1.2rem;
    color: #1adc0f;
  }
  .p4 {
    line-height: 2rem;
    font-size: 1.2rem;
    color: #e4cf2f;
  }
  .p5 {
    font-size: 0.8rem;
    margin-bottom: 0.6rem;
  }
  .p6 {
    line-height: 2rem;
    font-size: 1.2rem;
    color: #ff5722;
  }
  .left {
    width: 33.3%;
    float: left;
  }
}
.index-tab {
  border: 1px solid #25b02a;
  width: 70%;
  margin: 1rem auto;
  overflow: hidden;
  line-height: 2rem;
  border-radius: 1rem;
  height: 2rem;
  li {
    color: #25b02a;
    width: 33.33%;
    float: left;
    text-align: center;
    background: #fff;
    &.active {
      background: #25b02a;
      color: #fff;
    }
  }
}
.chart {
  background: #fff;
  padding: 0.5rem 1rem;
}
.v-header {
  height: 1.4rem;
  line-height: 1.4rem;
  margin: 0.2rem 0;
  &::before {
    content: "";
    display: inline-block;
    height: 1.1rem;
    width: 0.3rem;
    background: #25b02a;
    vertical-align: middle;
    margin-top: -0.2rem;
    margin-right: 0.3rem;
  }
}
</style>

